<!--  -->
<script setup>
import { ref, reactive, onMounted } from "vue";
const value1 = ref(true);
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "../../utils/http.js";
const router = useRouter();
const dialogVisible = ref(false);
const dialog = ref(false);
let tableData = ref([]);
let PageNo = ref(1);
let PageSiez = ref(10);
let total = ref(10);
let college_name = ref("");
let college_dean = ref("");
let college_words = ref("");
let college_create_time = ref("");
let name = ref("");
let dean = ref("");
let words = ref("");
let time = ref("");
let form = reactive({
  college_name: "",
  college_dean: "",
  college_words: "",
  college_create_time: "",
  college_status: "",
});
let id = ref("");
let d_list = ref([]);
onMounted(() => {
  getCollege();
  getdean();
});
function getdean() {
  axios({
    url: "zhineng/addcollege/",
    method: "get",
  }).then((res) => {
    d_list.value = res.data.data;
  });
}
function getCollege() {
  axios({
    url: "zhineng/seecollege/" + PageNo.value + "/" + PageSiez.value + "/",
    method: "get",
  }).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
  });
}
function handleSizeChange() {
  getCollege();
}
function handleCurrentChange() {
  getCollege();
}
function handleClose(done) {
  done();
}
function submit() {
  dialog.value = false;
  axios({
    url: "zhineng/addcollege/",
    method: "post",
    data: {
      college_name: name.value,
      college_dean: dean.value,
      college_words: words.value,
      college_create_time: time.value,
      college_status: value1.value,
    },
  }).then((res) => {
    getCollege();
    getdean();
    ElMessage({
      message: "新增成功",
      type: "success",
    });
  });
}
function edit() {
  dialogVisible.value = false;
  axios({
    url: "zhineng/editcollege/" + id.value + "/",
    method: "put",
    data: {
      college_name: college_name.value,
      college_dean: college_dean.value,
      college_words: college_words.value,
      college_create_time: college_create_time.value,
      college_status: value1.value,
    },
  }).then((res) => {
    getCollege();
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  });
}
function handleEdit(index, row) {
  dialogVisible.value = true;
  id.value = row.id;
  axios({
    url: "zhineng/editcollege/" + id.value + "/",
    method: "get",
  }).then((res) => {
    college_name.value = res.data.data.name;
    college_words.value = res.data.data.words;
    college_create_time.value = res.data.data.time;
    value1.value = res.data.data.status;
    college_dean.value = res.data.data.dean;
  });
}
function handleDelete(index, row) {
  let id = row.id;
  axios({
    url: "zhineng/editcollege/" + id.value + "/",
    method: "delete",
    data: {
      id: row.id,
    },
  }).then((res) => {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getCollege();
  });
}
</script>

<template>
  <el-button @click="dialog = true" type="primary">+新增学院</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="college_name" label="学院名称" width="180" />
    <el-table-column prop="college_create_time" label="学院创建时间" width="180" />
    <el-table-column label="学院状态"><template #default="scope">
        <el-switch v-model="value1" />
      </template>
    </el-table-column>
    <el-table-column prop="college_words" label="学院口号" width="180" />
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-popconfirm title="确定要删除该班级吗?" @confirm="handleDelete(scope.$index, scope.row)">
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialog" title="学院新增" width="800px" :before-close="handleClose">
    <el-form :model="form" label-width="120px">
      <el-form-item label="学院名称">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="院长">
        <el-select placeholder="请选择院长" v-model="dean" style="width: 240px">
          <el-option v-for="item in d_list" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="学院口号">
        <el-input v-model="words"></el-input>
      </el-form-item>
      <el-form-item label="学院创建时间">
        <el-date-picker v-model="time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="学院状态">
        <el-switch v-model="value1" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog = false">Cancel</el-button>
        <el-button type="primary" @click="submit()"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible" title="学院修改" width="800px" :before-close="handleClose">
    <el-form :model="form" label-width="120px">
      <el-form-item label="学院名称">
        <el-input v-model="college_name"></el-input>
      </el-form-item>
      <el-form-item label="院长">
        <el-select placeholder="请选择院长" v-model="college_dean" style="width: 240px">
          <el-option v-for="item in d_list" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="学院口号">
        <el-input v-model="college_words"></el-input>
      </el-form-item>
      <el-form-item label="学院创建时间">
        <el-date-picker v-model="college_create_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
          placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="学院状态">
        <el-switch v-model="value1" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="edit"> 修改 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-pagination id="pagination" v-model:current-page="PageNo" v-model:page-size="PageSiez"
    :page-sizes="[10, 20, 30, 40]" background layout=" prev, pager, next, jumper,->,total, sizes" :total="total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" style="width: 100%" />
</template>

<style scoped></style>
